<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="shared/css_js::header">
	<title>jQuery WeUI</title>
	<link rel="stylesheet" type="text/css" href="/static/css/weuicss/weui.min.css"/>
</head>
<style>
	.mycar{border-right:1px solid #b6b6b6}
	.del{border:1px solid red}
	.mui-table-view .mui-media-object {
		line-height: 42px;
		max-width: 420px;
		height: 42px;
	}
	.rightborder{border-right:1px solid #b6b6b6}

	.content-items li{
		list-style: none;
		float: left;
		padding: 4px 8px;
		margin: 5px;
		border: 1px #ededed solid;
		cursor: pointer;
		font-size: 22px;
		font-weight: 700;
		color: #666;
	}
	.mui-table-view-cell > a:not(.mui-btn) {
		position: relative;
		display: block;
		overflow: hidden;
		margin: -15px -15px;
		padding: inherit;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: inherit;
	}
	.weui-cell {
		padding: 3px 15px;
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
	}
</style>
<body>
<!--车型首页-->
<div th:id="carhome" style="display: block">
	<header class="mui-bar mui-bar-nav">
		<a class=" mui-icon mui-icon-left-nav " href="/person/personhome"></a>
		<h1 class="mui-title"><font size="4"><b>我的爱车</b></font></h1>
	</header>
	<nav th:id="pro" class="mui-bar mui-bar-tab" style="display: none">
		<div class="content-items">
			<ul th:each="province:${province}">
				<li th:text="${province.dictname}" th:onclick="'javascript:choocepro(\''+${province.dictname}+'\')'">粤</li>
			</ul>
		</div>
	</nav>

	<div class="mui-content" >
        <input type="hidden" id="custcarid" th:value="${car.custcarid}"/>
		<input type="hidden" id="setdefault" th:value="${car.setdefault}"/>
		<div >
			<ul class="mui-table-view" >
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:void(0)" style="padding: 7px 15px">
						<div class="weui-flex" onclick="mycar()">
							<div class="weui-flex__item mycar" >
								<img class="mui-media-object mui-pull-left " style="margin-top: 7px" th:src="'/img/caricon/'+${car.brandlogo}"/>
							</div>
							<div class="weui-flex__item" style="flex-grow: 3">
								<h4 style="margin-bottom: 15px" >&nbsp;&nbsp;<span th:text="${car.brandname+car.carlinename}">一汽大众奥迪-A4L</span><span style="color: #DF3348;text-align: right;margin-left:20%">默认车辆</span></h4>
								<div class="weui-flex">
									<div class="weui-flex__item" style="flex-grow: 4">
										<h5 >&nbsp;&nbsp;&nbsp;<span th:text="${car.carvol+'   '+car.caryear}">2009款  2.0T 无极 技术版</span></h5>
									</div>
									<!--<div class="weui-flex__item" style="flex-grow: 1">-->
										<!--<h4 style="color: #DF3348;" th:if="${car.setdefault==1}">默认车辆</h4>-->
									<!--</div>-->
								</div>
							</div>
						</div>
					</a>
				</li>
			</ul>
			<div class="weui-cells__title"></div><!--间隔一下-->
		</div>
		<div class="weui-cells weui-cell_access" style="margin-top: 0px">
			<div class="weui-cell">
				<div class="weui-cell__hd"><i class="fa fa-id-card" style="color: black"></i>&nbsp;&nbsp;</div>
				<div class="weui-cell__bd">
					<span style="margin-bottom: 0;font-size: 14px;font-weight: 700">基本信息</span>
				</div>
			</div>
		</div>
		<div class="weui-flex" style="border-bottom:1px solid #999;background-color: white">
			<div class="weui-flex__item" style="border-right:1px solid #999">
				<div class="weui-cell weui-cell_access" style="padding:5px 5px">
					<div class="weui-cell__bd">
						<p>里程</p>
					</div>
					<div class="weui-cell__ft">
						<input type="text" id='kmpicker' style="border: none;width:82px;margin:0;padding:0" readonly="readonly"/>
						<input type="hidden" id='km' th:value="${car.curkilo}"/>
						<span  id="ppp" style="font-size: 12px">KM</span>
					</div>
				</div>
			</div>
			<div class="weui-flex__item ">
				<div class="weui-cell weui-cell_access" style="padding: 5px 3px">
					<div class="weui-cell__bd">
						<p>上路时间</p>
					</div>
					<div class="weui-cell__ft">
						<input id="datesel" type="text" data-toggle="date" th:value="${car.regdate}" style="border: none;width:95px;margin:0;padding:0px" readonly="readonly"/>
					</div>
				</div>
			</div>
		</div>
		<div class="weui-cells__title"></div><!--间隔一下-->
		<div class="weui-cells " style="margin-top: 0px">
			<div class="weui-cell">
				<div class="weui-cell__hd"><i class="fa fa-id-card" style="color: black"></i>&nbsp;&nbsp;</div>
				<div class="weui-cell__bd">
					<span style="margin-bottom: 0;font-size: 14px;font-weight: 700">查违章信息</span>
				</div>
				<div class="weui-cell__ft" >
					<!--<video id="video" autoplay><i class="fa fa-minus-square-o"></i> 扫行驶证自动填写</video>-->
					<!--<input type="file" accept="image/*" th:value="扫行驶证自动填写" />-->
					<a href="javascript:void(0);" onclick="take_a_photo()"><i class="fa fa-minus-square-o"></i> <span style="font-size: 14px">扫行驶证自动填写</span></a>
				</div>
			</div>
		</div>
		<!--<canvas width="320px" height="240px" style="display: none" id="canvas"></canvas>
		<img id="img" src="" style="width:50px;height: 50px"/>
		<input type="hidden" id="base64" >-->

		<div class="weui-flex" style="border-bottom:1px solid #999;background-color: white">
			<div class="weui-flex__item" style="border-right:1px solid #999">
				<div class="weui-cell weui-cell_access" href="javascript:;" style="padding-left: 7px">
					<div class="weui-cell__bd">
						<h4 id="carpro" onclick="showpro()">粤</h4>
					</div>
					<div class="weui-cell__ft">
						<input type="text" id='carno1' th:onchange="'javascript:savecarno()'" style="border: none;width:120px;margin:0;padding:0"  placeholder="车牌号"/>
					</div>
				</div>
				<input type="hidden" th:value="${car.carno}" th:id="carno"/><!--存储读取的车牌号码-->
			</div>
			<div class="weui-flex__item ">
				<div class="weui-cell weui-cell_access" href="javascript:;" style="padding-left: 10px">
					<div class="weui-cell__bd" style="flex-grow:2">
						<p>发动机号</p>
					</div>
					<div class="weui-cell__ft" style="flex-grow:1">
						<input id="saveengineno" type="text"  th:value="${car.engineno}" th:onchange="'javascript:saveengineno()'" style="border: none;width:90px;margin:0;padding:0px" placeholder="请输入"/>
					</div>
				</div>
			</div>
		</div>
		<div class="weui-flex" style="border-bottom:1px solid #999;background-color: white">
			<div class="weui-flex__item" style="border-right:1px solid #999">
				<div class="weui-cell weui-cell_access" href="javascript:;" style="padding:3px 10px">
					<div class="weui-cell__bd">
						<p>所在城市:</p>
					</div>
					<div class="weui-cell__ft">
						<input type="text" id='city-picker' th:value="${car.regionid}" style="border: none;width:100%;margin:0;padding:0" placeholder="请输入城市"/>
					</div>
				</div>
			</div>
		</div>
		<div class="weui-flex" style="border-bottom:1px solid #999;background-color: white">
			<div class="weui-flex__item ">
				<div class="weui-cell weui-cell_access" href="javascript:;" style="padding:3px 10px">
					<div class="weui-cell__bd" style="flex-grow: 1">
						<p>车架号:</p>
					</div>
					<div class="weui-cell__bd" style="flex-grow: 4;color: grey">
						<input id="vin" type="text"  th:value="${car.vin}"  th:onchange="'javascript:savevin()'" placeholder="请输入"  style="border: none;width:100%;margin:0;padding:0px" />
					</div>
				</div>
			</div>
		</div>
		<div class="weui-cells__title"></div><!--间隔一下-->
		<div class="weui-cells weui-cell_access" style="margin-top: 0px">
			<div class="weui-cell">
				<div class="weui-cell__hd"><i class="fa fa-id-card" style="color: black"></i>&nbsp;&nbsp;</div>
				<div class="weui-cell__bd">
					<span style="margin-bottom: 0;font-size: 14px;font-weight: 700">车险信息</span>
				</div>
			</div>
		</div>
		<div class="weui-flex" style="border-bottom:1px solid #999;background-color: white">
			<div class="weui-flex__item" style="border-right:1px solid #999">
				<div class="weui-cell weui-cell_access" href="javascript:;" style="padding-left: 7px">
					<div class="weui-cell__bd" style="flex-grow:2">
						<p>保险公司</p>
					</div>
					<div class="weui-cell__ft" style="flex-grow:1">
						<input type="text"  onclick="insucomid()" th:value="${car.insucomname}" style="border: none;width:90px;margin:0;padding:0"  placeholder="请输入"/>
					</div>
				</div>
			</div>
			<div class="weui-flex__item ">
				<div class="weui-cell weui-cell_access" href="javascript:;" style="padding-left: 10px">
					<div class="weui-cell__bd" style="flex-grow:2">
						<p>保险到期</p>
					</div>
					<div class="weui-cell__ft" style="flex-grow:1">
						<input id="insuexpirydate" type="text" th:value="${car.insuexpirydate}"  style="border: none;width:90px;margin:0;padding:0px" placeholder="请输入"/>
					</div>
				</div>
			</div>
		</div>
		<div class="weui-flex" style="border-bottom:1px solid #999;background-color: white">
			<div class="weui-flex__item ">
				<div class="weui-cell weui-cell_access" href="javascript:;" style="padding-left: 10px">
					<div class="weui-cell__bd" style="flex-grow: 1">
						<p>身份证号:</p>
					</div>
					<div class="weui-cell__bd" style="flex-grow: 3">
						<input  type="text"   placeholder="请输入"  style="border: none;width:100%;margin:0;padding:0px" />
					</div>
				</div>
			</div>
		</div>
	</div>

	<input id="accesstoken" type="hidden" th:value="${accesstoken}"/>
	<input id="appId" type="hidden" th:value="${appId}"/>
	<input id="timestamp" type="hidden" th:value="${timestamp}"/>
	<input id="nonceStr" type="hidden" th:value="${nonceStr}"/>
	<input id="signature" type="hidden" th:value="${signature}"/>

</div>
<!--保险公司-->
<div th:id="insucomid" style="display: none">
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" onclick="exithome()"></a>
		<h1 class="mui-title"><font size="4"><b>保险公司</b></font></h1>
	</header>
	<div class="mui-content ">
		<div class="block-brand">
			<div >
				<ul class="list-line list-line-logo" th:each="insucompany:${insucompany}">
					<li th:onclick="'javascript:saveinsucomname(\''+${insucompany.insucomid}+'\')'">
						<img src="/img/baoma.jpg"/>
						<span  th:text="${insucompany.insucomname}">宝马</span>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<!--<link rel="stylesheet" type="text/css" th:href="@{/css/personcss/addcar.css}"/>-->
</div>
<link rel="stylesheet" type="text/css" th:href="@{/css/personcss/addcar.css}"/>
<script th:src="@{/js/weuijs/city-picker.js}" type="text/javascript"></script>
</body>
<script th:inline="javascript">
    /*<![CDATA[*/
/*管理车型*/
function mycar() {
	location.href="/person/mycar";
}

//上路时间日期选择器
$("#datesel").calendar({
    dateFormat:"yyyy-mm-dd",
    onClose:function () {
        var date=$("#datesel").val();
        mui.ajax('/item/updatedate',{
            data:{
                date:date
            },
            type:'get',//HTTP请求类型
            success:function(data){
                $.toptip('更新成功',2000, 'success');
            }
        })
    }
});

$(document).ready(function () {
    /*分割车牌赋值*/
    var carno=$("#carno").val();
    if(carno!=""){
        var carpro=carno.substring(0,1);
        var carnum=carno.substring(1);
        $("#carpro").text(carpro);
        $("#carno1").val(carnum);
	}


    //加载行驶里程
    var km = $("#km").val();
    km=km.split("");
    var kmp="";
    for(var i=0;i<6-km.length;i++){
        kmp+="0 ";
    }
    for(var j=0;j<km.length;j++){
        kmp+=km[j]+" ";
    }
	loadkm(kmp);
});

/*选择行驶里程*/
function loadkm(kmp) {
    $("#kmpicker").val(kmp);
    $("#kmpicker").picker({
        title: "请选择行驶里程",
        cols: [
            {
                values: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9']
                //如果你希望显示文案和实际值不同，可以在这里加一个displayValues: [.....]
            },
            {
                values: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9']
            },
            {
                values: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9']
            },
            {
                values: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9']
            },
            {
                values: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9']
            },
            {
                values: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9']
            }
        ],
        onClose:function () {
            var kmp=$("#kmpicker").val();
            var km=kmp.replace(/\s+/g,"");
            mui.ajax('/item/updatekm',{
                data:{
                    km:km
                },
                type:'get',//HTTP请求类型
                success:function(data){
                    $.toptip('更新成功',2000, 'success');
                }
            })
        }
    });
}

/*弹出车牌的省份*/
function showpro() {
	$("#pro").removeAttr("style");
}
/*选择车牌省份后赋值过去*/
function choocepro(province) {
	$("#carpro").text(province);
    $('#pro').attr("style","display:none");
    savecarno();
}
/*输入车牌号ajax存储*/
function savecarno() {
    var carpro=$("#carpro").text();
	var carno=$("#carno1").val();
    mui.ajax('/person/savecarno',{
        data:{
            carno:carpro+carno,
            custcarid:$("#custcarid").val()
        },
        type:'get',//HTTP请求类型
        success:function(data){
            if(data=='success'){
                $.toptip('更新成功', 'success');
			}else {
                $.toptip('操作失败', 'error');
			}
        }
    })
}

/*输入发动机号ajax存储*/
function saveengineno() {
    var saveengineno=$("#saveengineno").val();
    mui.ajax('/person/saveengineno',{
        data:{
            saveengineno:saveengineno,
            custcarid:$("#custcarid").val()
        },
        type:'get',//HTTP请求类型
        success:function(data){
            if(data=='success'){
                $.toptip('更新成功', 'success');
            }else {
                $.toptip('操作失败', 'error');
            }
        }
    })
}

/*输入车架号（vin）ajax存储*/
function savevin() {
    var vin=$("#vin").val();
    mui.ajax('/person/savevin',{
        data:{
            vin:vin,
            custcarid:$("#custcarid").val()
        },
        type:'get',//HTTP请求类型
        success:function(data){
            if(data=='success'){
                $.toptip('更新成功', 'success');
            }else {
                $.toptip('操作失败', 'error');
            }
        }
    })
}
/*选择城市*/
$("#city-picker").cityPicker({
    title: "请选择所在城市",
    onClose:function () {
        var regionid=$("#city-picker").val();
        mui.ajax('/person/saveregionid',{
            data:{
                regionid:regionid,
                custcarid:$("#custcarid").val()
            },
            type:'get',//HTTP请求类型
            success:function(data){
                if(data=='success'){
                    $.toptip('更新成功', 'success');
                }else {
                    $.toptip('操作失败', 'error');
                }
            }
        })
    }
});
//保险到期日日期选择器
$("#insuexpirydate").calendar({
    dateFormat:"yyyy-mm-dd",
    onClose:function () {
        var insuexpirydate=$("#insuexpirydate").val();
        mui.ajax('/person/saveinsuexpirydate',{
            data:{
                insuexpirydate:insuexpirydate,
                custcarid:$("#custcarid").val()
            },
            type:'get',//HTTP请求类型
            success:function(data){
                if(data=='success'){
                    $.toptip('更新成功', 'success');
                }else {
                    $.toptip('操作失败', 'error');
                }
            }
        })
    }
});

/*保险公司*/
function insucomid() {
    $("#insucomid").removeAttr("style");
    $('#carhome').attr("style","display:none");
}
/*点击保险公司的后退*/
function exithome() {
	location.href="/person/carhome";
}
/*点击保险公司具体一家后保存到数据库*/
function saveinsucomname(insucomid) {
    mui.ajax('/person/saveinsucomname',{
        data:{
            insucomid:insucomid,
            custcarid:$("#custcarid").val()
        },
        type:'get',//HTTP请求类型
        success:function(data){
            if(data=='success'){
                $.toptip('更新成功', 'success');
                location.href="/person/carhome?custcarid="+$("#custcarid").val();
            }else {
                $.toptip('操作失败', 'error');
            }
        }
    })
}
    /*]]>*/
</script>
<script th:src="@{/js/weuijs/city-picker.js}" type="text/javascript"></script>
<script th:inline="javascript">
    /*<![CDATA[*/
    var baseUrl="http://api.ocr.ikartek.com/api/ocr/ocrvehicle";
    /*获取基础access_token接口*/
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: $("#appId").val(), // 必填，公众号的唯一标识
        timestamp:$("#timestamp").val() , // 必填，生成签名的时间戳
        nonceStr: $("#nonceStr").val(), // 必填，生成签名的随机串
        signature: $("#signature").val(),// 必填，签名，见附录1
        jsApiList: ["chooseImage", "previewImage", "uploadImage", "downloadImage"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });
    // 图片接口
    // 拍照、本地选图
    var images = {
        localId: [],
        serverId: []
    };

    // 拍照或者选择照片
    function take_a_photo(){
        wx.chooseImage({
            count: 1, // 默认9，这里每次只处理一张照片
            sizeType: ['original', 'compressed'],   // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'],        // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                images.localId = res.localIds;      // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
				console.log(res);
                var i = 0, length = images.localId.length;
                function upload() {
                    wx.uploadImage({
                        localId: images.localId[i],
                        success: function(res) {
                            i++;
                            images.serverId.push(res.serverId);
                            $.showLoading("加载中...");
                            mui.ajax('/person/uploadpic',{
                                data:{
                                    mediaId:res.serverId
                                },
                                type:'get',//HTTP请求类型
                                success:function(data){
                                     var base64=data;
                                    $.ajax({
                                        type:"POST",
                                        url:baseUrl,
                                        dataType:'json',
                                        data:{imagebase64:base64,token:''},
                                        //headers:{Authorization1:'1',sub:'',Accept: "application/json; charset=utf-8" ,'Access-Control-Allow-Origin':'*'},
                                        success:function (data) {
                                            $.hideLoading();
                                            var params = {
                                                "json":JSON.stringify(data),
												"custcarid":$("#custcarid").val(),
												"setdefault":$("#setdefault").val()
                                            };
                                           httpPost('/person/getLocalImgData',params)
                                        },
                                        error:function (err) {
                                            $.hideLoading();
                                            alert("获取行驶证信息失败");
                                        }
                                    });
                                }
                            })
                            // res.serverId 就是 media_id，根据它去微信服务器读取图片数据：
                            var indata = {"media_id":res.serverId};

                            if (i < length) {
                                upload();
                            }
                        },
                        fail: function(res) {
                            alert(JSON.stringify(res));
                        }
                    });
                }
                upload();
            }
        });
    }

    //post提交
    function httpPost(URL, PARAMS) {
        var temp = document.createElement("form");
        temp.action = URL;
        temp.method = "post";
        temp.style.display = "none";

        for (var x in PARAMS) {
            var opt = document.createElement("textarea");
            opt.name = x;
            opt.value = PARAMS[x];
            temp.appendChild(opt);
        }
        document.body.appendChild(temp);
        temp.submit();
        return temp;
    }
    /*]]>*/
</script>
</html>
